
import { useLocation } from 'react-router-dom'
import './index.scss'
import { ActionBar } from 'react-vant';
export const Detail = () => {
    const { state: { data } } = useLocation()
    console.log(data);
    return (
        <div className="detail">
            <img src={data.img ? data.img : ''} alt="" />
            {/* title */}
            <h3>{data.name ? data.name : ''} {data.fangxing ? data.fangxing : ''}
                <span>{data.mianji ? data.mianji : ''}m<sup>2</sup></span></h3>
            {/* 价格 */}
            <div className="price">
                <span>{data.fangxing ? data.fangxing : ''} 1厅 1卫</span>
                &nbsp;<span>{data.mianji ? data.mianji : ''}m<sup>2</sup></span>
            </div>
            <div className="detail-main">
                {/* 房源信息 */}
                <div className="information">
                    <h3>房源信息</h3>
                    <div className="information-item">
                        <div>
                            <p>单价</p>
                            <h4>{data.jiage}/m<sup>2</sup></h4>
                        </div>
                        <div>
                            <p>朝向</p>
                            <h4>{data.cx}</h4>
                        </div>
                        <div>
                            <p>装修</p>
                            <h4>{data.zx}</h4>
                        </div>
                        <div>
                            <p>楼层</p>
                            <h4>{data.ll}楼</h4>
                        </div>
                        <div>
                            <p>类型</p>
                            <h4>{data.lx}</h4>
                        </div>
                        <div>
                            <p>更新</p>
                            <h4>{data.ts}</h4>
                        </div>
                    </div>
                </div>
                {/* 房源特色 */}
                <div className="characteristic">
                    <h3>房源特色</h3>
                    <div>
                        <h4>核心卖点</h4>
                        <p>原始装修 三室两厅一卫 客厅朝阳两卧室朝阳楼层好 苏外名额没用各出个税</p>
                    </div>
                    <div>
                        <h4>业主心态</h4>
                        <p>业主诚心出售此房，积极配合看房和达成协议后的各项手续。产权清晰无纠纷，看房方便，房主诚心出售</p>
                    </div>
                    <div>
                        <h4>服务介绍</h4>
                        <p>我从事房产工作多年，经验丰富</p>
                        <p>1:能够精确的根据每一位客户的详细需求匹配到性价比合适的</p>
                        <p>2:和业主议价是我的强项，让每位客户真正的省钱</p>
                        <p>3:我们的服务能让您物超所值</p>
                        <p>4:您的买房之旅，让您更加 安心 放心省心</p>
                    </div>
                </div>
                <div className="detail-footer">
                    <ActionBar>
                        <ActionBar.Icon icon="chat-o" color="#ee0a24" text="客服" />
                        <ActionBar.Icon icon="star" color="#ff5000" text="收藏" />
                        <ActionBar.Button type="warning" text="在线咨询" />
                        <ActionBar.Button type="danger" text="电话咨询" />
                    </ActionBar>
                </div>
            </div>
        </div>
    );
};

export default Detail;